<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <!-- 基础元数据 -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>全国电动汽车数据用户数据分析平台</title>

    <!-- 引入外部资源 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

    <style>
        /* ========== 全局样式重置 ========== */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
        }

        /* ========== CSS变量定义 ========== */
        :root {
            --primary: #1e3a8a;
            --secondary: #10b981;
            --accent: #3b82f6;
            --light: #f8fafc;
            --dark: #0f172a;
            --gray: #94a3b8;
            --card-bg: rgba(255, 255, 255, 0.95);
            --sidebar-width: 280px;
            --header-height: 80px;
        }

        /* ========== 页面主体样式 ========== */
        body {
            background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
            color: var(--dark);
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            overflow-x: hidden;
        }

        /* ========== 头部样式 ========== */
        .header {
            background: linear-gradient(90deg, var(--primary) 0%, #0c2043 100%);
            color: white;
            padding: 0 30px;
            height: var(--header-height);
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            z-index: 100;
        }

        /* ========== 标志样式 ========== */
        .logo {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .logo i {
            color: var(--secondary);
            font-size: 2rem;
            animation: pulse 2s infinite;
        }

        @keyframes pulse {
            0%,100% { transform: scale(1); }
            50% { transform: scale(1.1); }
        }

        .logo h1 {
            font-size: 1.8rem;
            font-weight: 700;
        }

        .logo a {
            color: var(--secondary);
            font-size: 0.9rem;
            margin-top: 5px;
            display: block;
            transition: all 0.3s ease;
            text-decoration: none;
        }

        .logo a:hover {
            color: white;
            text-decoration: underline;
        }

        /* ========== 控制区域样式 ========== */
        .controls {
            display: flex;
            gap: 20px;
            align-items: center;
        }

        /* 日期显示样式 */
        .date-display {
            background: rgba(255, 255, 255, 0.2);
            padding: 8px 15px;
            border-radius: 20px;
            font-size: 0.9rem;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        /* 退出按钮样式 */
        .logout-btn {
            background: rgba(255, 255, 255, 0.2);
            color: white;
            border: none;
            padding: 8px 15px;
            border-radius: 20px;
            font-size: 0.9rem;
            display: flex;
            align-items: center;
            gap: 8px;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .logout-btn:hover {
            background: rgba(255, 255, 255, 0.3);
        }

        /* ========== 仪表盘容器 ========== */
        .dashboard-container {
            display: flex;
            flex: 1;
            padding: 20px;
            gap: 20px;
            height: calc(100vh - var(--header-height) - 40px);
        }

        /* ========== 侧边导航栏 ========== */
        .sidebar {
            width: var(--sidebar-width);
            background: var(--card-bg);
            border-radius: 16px;
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
            padding: 20px;
            display: flex;
            flex-direction: column;
            gap: 20px;
            overflow-y: auto;
        }

        /* ========== 导航部分样式 ========== */
        .nav-section {
            margin-bottom: 15px;
        }

        /* 导航标题 */
        .nav-title {
            font-size: 1.1rem;
            font-weight: 600;
            color: var(--primary);
            margin-bottom: 15px;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .nav-title i {
            color: var(--accent);
        }

        /* 导航链接 */
        .nav-links {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        /* 导航项 */
        .nav-item {
            padding: 12px 15px;
            background: #f1f5f9;
            border-radius: 10px;
            display: flex;
            align-items: center;
            gap: 12px;
            cursor: pointer;
            transition: all 0.3s ease;
            border-left: 4px solid transparent;
        }

        /* 悬停效果 */
        .nav-item:hover {
            background: #e2e8f0;
            border-left: 4px solid var(--accent);
        }

        /* 激活状态 */
        .nav-item.active {
            background: #dbeafe;
            border-left: 4px solid var(--primary);
        }

        .nav-item i {
            width: 24px;
            text-align: center;
            color: var(--primary);
        }

        /* ========== 主内容区 ========== */
        .main-content {
            flex: 1;
            background: var(--card-bg);
            border-radius: 16px;
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
            position: relative;
            overflow: hidden;
        }

        /* 内容容器 */
        .content-container {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
        }

        /* 内容头部 */
        .content-header {
            padding: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        }

        /* 内容标题 */
        .content-title {
            font-size: 1.3rem;
            font-weight: 600;
            color: var(--primary);
            display: flex;
            align-items: center;
            gap: 10px;
        }

        /* 内容操作按钮 */
        .content-actions {
            display: flex;
            gap: 10px;
        }

        .action-btn {
            background: #f1f5f9;
            border: none;
            width: 36px;
            height: 36px;
            border-radius: 50%;
            color: var(--primary);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .action-btn:hover {
            background: var(--accent);
            color: white;
        }

        /* 内容主体 */
        .content-body {
            flex: 1;
            padding: 15px;
            display: flex;
            position: relative;
        }

        /* iframe容器 */
        .iframe-container {
            width: 100%;
            height: 100%;
            min-height: 500px;
            border: none;
        }

        /* 文本区域容器 */
        .text-container {
            width: 300px;
            padding: 15px;
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
            margin-left: 20px;
            overflow-y: auto;
        }

        /* 文本区域标题 */
        .text-title {
            font-size: 1.1rem;
            font-weight: 600;
            color: var(--primary);
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 1px solid #eee;
        }

        /* 文本内容 */
        .text-content {
            font-size: 0.95rem;
            line-height: 1.6;
            color: var(--dark);
        }

        /* ========== 页脚 ========== */
        .footer {
            text-align: center;
            padding: 20px;
            color: var(--gray);
            font-size: 0.9rem;
            border-top: 1px solid rgba(0, 0, 0, 0.05);
        }

        /* ========== 响应式设计 ========== */
        @media (max-width: 1200px) {
            .dashboard-container {
                flex-direction: column;
                height: auto;
            }
            .sidebar {
                width: 100%;
                max-height: 300px;
            }
            .content-body {
                flex-direction: column;
            }
            .text-container {
                width: 100%;
                margin-left: 0;
                margin-top: 20px;
            }
        }

        @media (max-width: 768px) {
            .header {
                flex-direction: column;
                height: auto;
                padding: 15px;
                gap: 15px;
            }
            .controls {
                flex-wrap: wrap;
                justify-content: center;
            }
            .logo {
                flex-direction: column;
                align-items: flex-start;
            }
            .logo a {
                margin-top: 8px;
            }
        }
    </style>
</head>
<body>
    <!-- ========== 头部区域 ========== -->
    <div class="header">
        <div class="logo">
            <i class="fas fa-charging-station"></i>
            <div>
                <h1>全国电动汽车用户数据分析平台</h1>
                <a href="全国电动汽车销售数据可视化平台.html">全国电动汽车销售数据可视化平台</a>
            </div>
        </div>
        <div class="controls">
            <div class="date-display">
                <i class="fas fa-calendar-alt"></i>
                <span id="current-date">2025年5月15日</span>
            </div>
            <button class="logout-btn" id="logout-btn">
                <i class="fas fa-sign-out-alt"></i>
                <span>退出</span>
            </button>
        </div>
    </div>

    <!-- ========== 主内容区域 ========== -->
    <div class="dashboard-container">
        <!-- 侧边导航栏 -->
        <div class="sidebar">
            <div class="nav-section">
                <div class="nav-title">
                    <i class="fas fa-tv"></i>
                    <span>可视化大屏</span>
                </div>
                <div class="nav-links">
                    <div class="nav-item active" data-content="dashboard" data-src="result1/resize_render1.html">
                        <i class="fas fa-desktop"></i>
                        <span>用户分析大屏</span>
                    </div>
                </div>
            </div>

            <div class="nav-section">
                <div class="nav-title">
                    <i class="fas fa-users"></i>
                    <span>用户分析</span>
                </div>
                <div class="nav-links">
                    <div class="nav-item" data-content="age-dist" data-src="result1/用户年龄分布.html">
                        <i class="fas fa-user-friends"></i>
                        <span>用户年龄分布</span>
                    </div>
                    <div class="nav-item" data-content="age-brand" data-src="result1/年龄段品牌偏好柱状图.html">
                        <i class="fas fa-chart-bar"></i>
                        <span>年龄段品牌偏好</span>
                    </div>
                    <div class="nav-item" data-content="gender-brand" data-src="result1/性别品牌偏好折线图.html">
                        <i class="fas fa-venus-mars"></i>
                        <span>性别品牌偏好</span>
                    </div>
                </div>
            </div>

            <div class="nav-section">
                <div class="nav-title">
                    <i class="fas fa-car"></i>
                    <span>品牌车型分析</span>
                </div>
                <div class="nav-links">
                    <div class="nav-item" data-content="brand-model" data-src="result1/品牌车型旭日图.html">
                        <i class="fas fa-sun"></i>
                        <span>品牌车型分布</span>
                    </div>
                </div>
            </div>

            <div class="nav-section">
                <div class="nav-title">
                    <i class="fas fa-briefcase"></i>
                    <span>职业与使用场景</span>
                </div>
                <div class="nav-links">
                    <div class="nav-item" data-content="profession" data-src="result1/用户职业与电动汽车品牌占比.html">
                        <i class="fas fa-user-tie"></i>
                        <span>职业品牌偏好</span>
                    </div>
                    <div class="nav-item" data-content="usage" data-src="result1/用户使用场景与电动汽车品牌占比.html">
                        <i class="fas fa-road"></i>
                        <span>使用场景分析</span>
                    </div>
                </div>
            </div>

            <div class="nav-section">
                <div class="nav-title">
                    <i class="fas fa-sync-alt"></i>
                    <span>OTA与过户状态</span>
                </div>
                <div class="nav-links">
                    <div class="nav-item" data-content="ota" data-src="result1/用户OTA频率与电动汽车品牌占比.html">
                        <i class="fas fa-cloud-download-alt"></i>
                        <span>OTA频率分析</span>
                    </div>
                    <div class="nav-item" data-content="transfer" data-src="result1/电动汽车过户状态与电动汽车品牌占比.html">
                        <i class="fas fa-exchange-alt"></i>
                        <span>过户状态分析</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- 主内容区 -->
        <div class="main-content">
            <div class="content-container" id="content-container">
                <div class="content-header">
                    <div class="content-title" id="content-title">
                        <i class="fas fa-desktop"></i>
                        <span>电动汽车用户分析大屏</span>
                    </div>
                    <div class="content-actions">
                        <button class="action-btn" title="刷新" id="refresh-btn">
                            <i class="fas fa-sync-alt"></i>
                        </button>
                    </div>
                </div>
                <div class="content-body">
                    <iframe id="content-frame"
                            class="iframe-container"
                            src="result1/resize_render1.html"
                            frameborder="0">
                    </iframe>
                    <div class="text-container" id="text-container" style="display: none;">
                        <div class="text-title">数据分析说明</div>
                        <div class="text-content" id="text-content">
                            <!-- 这里将动态填充文本内容 -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- ========== 页脚区域 ========== -->
    <div class="footer">
        <p>© 2025 电动汽车用户分析平台 | 数据更新时间: <span id="update-time">2025年11月15日</span></p>
    </div>

    <script>
        // ========== 页面初始化 ==========

        // 设置当前日期
        document.getElementById('current-date').textContent =
            new Date().toLocaleDateString('zh-CN', { year: 'numeric', month: 'long', day: 'numeric' });

        // 设置数据更新时间
        document.getElementById('update-time').textContent =
            new Date().toLocaleDateString('zh-CN', { year: 'numeric', month: 'long', day: 'numeric' });

        // ========== 内容标题映射对象 ==========
        const contentTitles = {
            'dashboard': ['fas fa-desktop', '电动汽车用户分析大屏'],
            'age-dist': ['fas fa-user-friends', '用户年龄分布'],
            'age-brand': ['fas fa-chart-bar', '年龄段品牌偏好'],
            'gender-brand': ['fas fa-venus-mars', '性别品牌偏好'],
            'brand-model': ['fas fa-sun', '品牌车型分布'],
            'profession': ['fas fa-user-tie', '职业品牌偏好'],
            'usage': ['fas fa-road', '使用场景分析'],
            'ota': ['fas fa-cloud-download-alt', 'OTA频率分析'],
            'transfer': ['fas fa-exchange-alt', '过户状态分析']
        };

        // ========== 切换内容视图函数 ==========
        function showContent(contentType, src) {
            const contentTitle = document.getElementById('content-title');
            const [icon, title] = contentTitles[contentType] || ['fas fa-chart-bar', '数据图表'];

            contentTitle.innerHTML = `<i class="${icon}"></i><span>${title}</span>`;

            const frame = document.getElementById('content-frame');
            frame.src = src;

            const textContainer = document.getElementById('text-container');
            const textContent = document.getElementById('text-content');

            if (contentType === 'dashboard') {
                textContainer.style.display = 'none';
                frame.style.width = '100%';
            } else {
                textContainer.style.display = 'block';
                frame.style.width = 'calc(100% - 320px)';

                let contentText = '';
                switch(contentType) {
                    case 'age-dist':
                        contentText = '车需求旺盛有关，同时也反映出电动汽车品牌在年轻化营销策略上的成功。';
                        break;
                    case 'age-brand':
                        contentText = '此图表展示了不同年龄段用户对电动汽车品牌的偏好情况。通过对比可以了解哪些品牌更受特定年龄段用户的青睐。';
                        break;
                    case 'gender-brand':
                        contentText = '此图表展示了不同性别用户对电动汽车品牌的偏好情况。可以分析性别因素对品牌选择的影响。';
                        break;
                    case 'brand-model':
                        contentText = '此旭日图展示了各品牌电动汽车型号的分布情况。可以直观地看到各品牌的产品线结构和市场覆盖情况。';
                        break;
                    case 'profession':
                        contentText = '此图表展示了不同职业用户对电动汽车品牌的偏好情况。可以分析职业因素对品牌选择的影响。';
                        break;
                    case 'usage':
                        contentText = '此图表展示了电动汽车在不同使用场景下的品牌分布情况。可以了解不同品牌在不同使用场景中的表现。';
                        break;
                    case 'ota':
                        contentText = '此图表展示了用户OTA更新频率与电动汽车品牌的关系。可以分析不同品牌在软件更新服务方面的表现。';
                        break;
                    case 'transfer':
                        contentText = '此图表展示了电动汽车过户状态与品牌的关系。可以了解不同品牌车辆的二手市场流通情况。';
                        break;
                    default:
                        contentText = '这里是关于当前数据图表的分析和说明。您可以根据需要添加详细的数据解读和分析内容。';
                }
                textContent.innerHTML = contentText;
            }
        }

        // ========== 页面加载完成后执行 ==========
        document.addEventListener('DOMContentLoaded', () => {
            // 初始化默认内容
            const defaultItem = document.querySelector('.nav-item.active');
            if (defaultItem) {
                const contentType = defaultItem.getAttribute('data-content');
                const src = defaultItem.getAttribute('data-src');
                showContent(contentType, src);
            }

            // 为所有导航项添加点击事件
            document.querySelectorAll('.nav-item').forEach(item => {
                item.addEventListener('click', function() {
                    document.querySelectorAll('.nav-item').forEach(el => el.classList.remove('active'));
                    this.classList.add('active');

                    const contentType = this.getAttribute('data-content');
                    const src = this.getAttribute('data-src');
                    showContent(contentType, src);
                });
            });

            // 刷新按钮点击事件
            document.getElementById('refresh-btn').addEventListener('click', function() {
                const frame = document.getElementById('content-frame');
                frame.src = frame.src;
            });

            // 退出按钮点击事件
            document.getElementById('logout-btn').addEventListener('click', function() {
                window.location.href = 'index.html';
            });
        });
    </script>
</body>
</html>